
<template>
    <el-form ref="formRef" :model="bannerData" label-position="right" label-width="100px" style="max-width: 460px">
        <el-form-item label="图片地址">
            <el-input v-model="bannerData.img" />
        </el-form-item>
        <el-form-item label="图片提示">
            <el-input v-model="bannerData.alt" />
        </el-form-item>
        <el-form-item label="图片连接">
            <el-input v-model="bannerData.link" />
        </el-form-item>
        <el-button @click="addBanner">添加</el-button>
        <el-button @click="cancelFn">取消</el-button>
    </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import type { IBanner } from "@/myTypes/index";
import { addBannerApi } from "@/api/banner";
import { ElMessageBox,ElMessage } from 'element-plus';

interface IEmits {
    (e: "ok"): void,
    (e: "cancel"): void,
}
// 声明事件
const emits = defineEmits<IEmits>()

const bannerData = reactive<IBanner>({
    img: "",
    alt: "",
    link: ""
})

const formRef = ref<FormInstance>();

function addBanner() {

    console.log("bannerData", bannerData);

    addBannerApi(bannerData).then(res => {
        if (res.data.code === "200") {
            ElMessage({
                message: "添加成功！",
                duration: 1000
            })
            clearData();
            emits("ok");//关闭抽屉     

        }
    })

}

function clearData() {
    bannerData.img = ""
    bannerData.alt = ""
    bannerData.link = ""
}

defineExpose({clearData})

function cancelFn(){
    ElMessageBox.confirm('亲，您真的要关闭吗？')
    .then(() => {
        clearData();
        emits("cancel");
    })
    .catch(() => {
        console.log("点了取消");
    })
}

</script>


<style lang="scss" scoped></style>
